
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { fetchGetSocietyList } from '@/api/society/index'
import { usePublicStoreHook } from "@/store/modules/public";
import { fetchPostJoinSociety } from '@/api/public/societyApply'
import { useUserStore } from "@/store/modules/user";
const router = useRouter();

// 表单数据
let tableData = reactive([])
const customColors = [
  { color: '#38EF7D', percentage: 20 },
  { color: '#2FDC80', percentage: 40 },
  { color: '#25C585', percentage: 60 },
  { color: '#1BAF8A', percentage: 80 },
  { color: '#11998D', percentage: 100 },
]
/**
 * 跳转
 */
const navDetail = (row: any) => {
  console.log(row);
  router.push({ path: '/student/society/detail', query: { ...row } })
}
const total = ref<number>(0)// 列表总数
// 实际传递的条件
const listQuery = reactive({
  currentPage: 1,
  name: undefined, // 名称
  type: undefined, // 类型
  status: undefined, // 招新状态
  pageSize: 10
})
// 显示在界面上的查询条件
const showQuery = reactive({
  currentPage: 1,
  name: undefined, // 名称
  type: undefined, // 类型
  status: undefined, // 招新状态
})
// 查询
const handleSearch = () => {
  getPageList()
}
// 社团类型
let typeOptions = ref([
  {
    id: '',
    name: ''
  }
])

const tableLoading = ref(false)

// 获取列表
const getPageList = async () => {
  tableLoading.value = true
  listQuery.name = showQuery.name
  listQuery.type = showQuery.type
  listQuery.status = showQuery.status
  const res = await fetchGetSocietyList(listQuery)
  const { currentPage, data } = res.data
  listQuery.currentPage = showQuery.currentPage = currentPage
  total.value = res.data.total
  tableData = data
  tableLoading.value = false
}

// 招新状态
const statusOptions = [
  {
    value: 0,
    label: '正在招新',
  },
  {
    value: 1,
    label: '已招满',
  },
  {
    value: 2,
    label: '暂不招新',
  },
]

const handleJoin = (row: { minister: any; }) => {
  ElMessageBox.confirm(
    '当前操作会发起加入社团申请，是否继续？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const params = {
        personId: useUserStore().userInfo.id,
        applyType: 5,
        checkPerson: row.minister
      }
      fetchPostJoinSociety(params).then((res) => {
        if (Number(res.code) === 200) {
          ElMessage({
            type: 'success',
            message: '操作成功，等待审批',
          })
        }
      })

    })
    .catch(() => {
    })
}

const filterType = (type: any) => {
  for (let i = 0; i < typeOptions.value.length; i++) {
    if (typeOptions.value[i].id === type) return typeOptions.value[i].name
  }
}
onMounted(() => {
  getPageList()
  typeOptions.value = usePublicStoreHook().societyTypeList
})
</script>

<template>
  <div class="society-content">
    <div class="header flex flex-center">
      <el-input v-model="showQuery.name" placeholder="社团名称" clearable />
      <el-select v-model="showQuery.type" class="m-2" placeholder="社团类型" clearable>
        <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="showQuery.status" class="m-2" placeholder="招新状态" clearable>
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" clearable />
      </el-select>
      <el-button type="primary" @click="handleSearch" :icon="Search" class="btn-green">
        查询
      </el-button>
    </div>
    <el-table :data="tableData" stripe v-loading="tableLoading">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="name" label="社团名称" show-overflow-tooltip>
        <template #default="scope">
          <div class="check-wait pointer" @click="navDetail(scope.row)">
            {{ scope.row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="社团类型" show-overflow-tooltip>
        <template #default="scope">
          <div>{{ filterType(scope.row.type) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="introduce" label="社团简介" show-overflow-tooltip width="350" />
      <el-table-column prop="percentage" label="招新进度" width="250">
        <template #default="scope">
          <el-progress :percentage="Number((scope.row.nowNumber / scope.row.planNumber * 100).toFixed(1))"
            :color="customColors" :stroke-width="12" />
        </template>
      </el-table-column>
      <el-table-column prop="minister" label="剩余名额">
        <template #default="scope">
          <div>{{ scope.row.planNumber - scope.row.nowNumber }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="招新状态">
        <template #default="scope">
          <div v-if="scope.row.status == 0" class="theme-success">正在招新</div>
          <div v-if="scope.row.status == 1" class="theme-warn">暂不招新</div>
          <div v-if="scope.row.status == 2" class="theme-error">已招满</div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作">
        <template #default="scope">
          <div class="theme-success">
            <el-button type="primary" class="btn-green" v-if="scope.row.status == 0 && useUserStore().userInfo.role == 0"
              @click="handleJoin(scope.row)">加入</el-button>
            <el-button type="primary" class="btn-white" @click="navDetail(scope.row)">查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" v-model:page="listQuery.currentPage" v-model:limit="listQuery.pageSize" hide-on-single-page
      @pagination="getPageList" />
  </div>
</template>
<style lang="scss" scoped>
.society-content {
  // min-height: 80rem;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  display: grid;
  grid-template-rows: 8rem auto;
  gap: 2rem;
  padding: 2rem;

  .header {
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .el-input,
    .el-select {
      margin-right: 20px;
      width: 16%;
    }
  }
}
</style>

